<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <img src="./DragonNagisa.png" width="400px" height="500px" title="This is Nagisa">
</body>
<script>
      let img = document.querySelector('img');
      console.dir(img);
      img.title = 'new nagisa';
      img.onclick = function () {
         if(img.src.lastIndexOf('DragonNagisa.png') !== -1)
         {
            img.src = "BigHeadNagisa.png"
            img.title = "this is big head"
         }      
         else 
         {
            img.src = "DragonNagisa.png"
            img.title = "this is dragon"
         }
      }
      console.log(img.title);
</script>    
</html>